<template>
	<view class="file-list" v-if="files.length>0" >
		<view @click="showDoc" :style="current==(index+1)?'border: 1px solid #007AFF':''" :id="index" class="file-item" v-for="(item,index) in files" :key="index">
			<image :lazy-load="true" class="img" :src="item.img" mode=""></image>
			<text class="item-tag" :class="current==(index+1)?'active':''">{{index+1}}</text>	
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				current:0,
				files:[
					{	
						id:1,
						name:'员工手册',
						url:'xx.txt',
						img:'../../static/docDetails/04.JPG'
					},{
						id:2,
						name:'薪酬管理办法2018',
						url:'xx.txt',
						img:'../../static/docDetails/05.JPG'
					},{
						id:3,
						name:'薪酬管理办法2018',
						url:'xx.txt',
						img:'../../static/docDetails/07.JPG'
					},{
						id:4,
						name:'薪酬管理办法2018',
						url:'xx.txt',
						img:'../../static/docDetails/09.JPG'
					},
				],
			}
		},
		onLoad: function (arg) {
			setTimeout(function () {
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
			
			const idx = arg.idx
			this.current = idx
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods:{
			showDoc(e){
				const idx = e.currentTarget.id 
				uni.navigateTo({
					url: './docDetails?id=doc&current='+idx+''
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.file-list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 80rpx;
		flex-wrap: wrap;
		.file-item{
			position: relative;
			width: 172rpx;
			height: 320rpx;
			background-color: #fff;
			border-radius: 4px;
			display: flex;
			margin-bottom: 64rpx;
			justify-content: center;
			align-items: start;
			padding: 0 30rpx;
			color: #101010;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 2;
			text-align: center;
			border: 1px solid rgba(255, 255, 255, 0);
			box-shadow: 0px 4px 10px 4px rgba(234, 234, 234, 0.4);
			.img{
				width: 100%;
				height: 100%;
			}
			.item-tag{
				position: absolute;
				bottom: 0;
				right: 0;
				background-color: #bfbfbff2;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				font-size: 10px;
				color: #fff;
			}
			.active{
				background-color: #007AFF;
			}
		}	
	}
</style>
